import React, { useState } from 'react'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'

import Button from '../src/components/Button/button'
// import { ButtonSize, ButtonType } from './components/Button/types'
import Menu from '../src/components/Menu/menu'
import MenuItem from '../src/components/Menu/menuItem'
import SubMenu from '../src/components/Menu/subMenu'
import Icon from '../src/components/Icon/icon'
import Transition from '../src/components/Transition/transition'

library.add(fas)

function App() {
	const [show, setShow] = useState(false)
	return (
		<div className="App">
			<header className="App-header">
				<Button>Hello</Button>
				<Button btnType="primary" size="lg">
					Primary Button
				</Button>
				<Button btnType="danger" size="sm">
					Danger Button
				</Button>
				<Button btnType="link" size="lg" href="http://www.baidu.com" disabled>
					百度 Link
				</Button>
			</header>
			<br />
			<div>
				<Menu
					defaultIndex="0"
					onSelect={(index) => {
						console.log(index)
					}}
					mode="vertical"
					defaultOpenSubMenus={['2']}
				>
					<MenuItem>cool link</MenuItem>
					<MenuItem disabled>cool link 2</MenuItem>
					<SubMenu title="dropdown">
						<MenuItem>dropdown 1</MenuItem>
						<MenuItem>dropdown 2</MenuItem>
					</SubMenu>
					<MenuItem>cool link 3</MenuItem>
				</Menu>
				<Button
					size="lg"
					onClick={() => {
						setShow(!show)
					}}
				>
					toggle
				</Button>
				<Transition in={show} timeout={300} animation="zoom-in-left">
					<div>
						<p>
							Edit <code>src/App.tsx</code> and save to reload.
						</p>
						<a
							className="App-link"
							href="https://reactjs.org"
							target="_blank"
							rel="noopener noreferrer"
						>
							Learn React
						</a>
					</div>
				</Transition>
			</div>
			<Icon icon="coffee" theme="danger" size="10x" />
			<Icon icon="arrow-down" theme="secondary" size="10x" />
		</div>
	)
}

export default App
